/*
  学习目标：掌握ref - 组件实例
  作用: 获取dom元素和组件实例
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 1. 创建ref对象:  React.createRef()
  childRef = React.createRef();

  render() {
    return (
      <div>
        {/* 2. 绑定ref对象:  到dom或者组件标签上 */}
        <Child ref={this.childRef} />
        <button
          onClick={() => {
            // 3. 通过ref对象.current属性, 获取dom元素或者组件实例对象
            this.childRef.current.handleAlert();
          }}
        >
          点我激活调用子组件的alert方法
        </button>
      </div>
    );
  }
}

// 💥 注意: 只有class组件有实例对象, 函数式组件没有实例对象, 早期, 无法使用ref获取
class Child extends React.Component {
  handleAlert() {
    alert('我是子组件, 我被触发了');
  }
  render() {
    return <div></div>;
  }
}
